<template>
  <div class="auxiliary-right-btn-item">
    <a href="javascript:void(0);" @click="goodsToggle()" class="btn-item bg-1">商品</a>
    <el-dialog
      :close-on-click-modal="false"
      title="商品同步"
      :visible.sync="goodsDialog"
      width="1000px"
      :append-to-body="true"
    >
      <el-row>
        <el-button type="primary" size="small">同步</el-button>
      </el-row>
      <div style="margin-top:20px;">
        <el-table :data="goodsData" size="small" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
          <el-table-column prop="id" label="商品编号" width="180" align="center"></el-table-column>
          <el-table-column prop="img" label="商品图片" width="180" align="center">
            <template slot-scope="scope">
              <el-image style="width: auto; height: 60px" :src="scope.row.img" fit="scale-down"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">已入库</el-tag>
              <el-tag type="info" v-else>待入库</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="goodsDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="goodsDialog = false" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getElementsByAttr } from '../utils/utils'
// import { loadElmBtn, addGood, cleanGood, getGoodsList } from '../utils/good'
// import { IGood } from '../utils/good'
export default {
  data: function () {
    return {
      goodsDialog: false,
      goodsData: [{
        id: '12313132412',
        img: 'http://www.gov.cn/govweb/c1293/202112/5665879/images/dd12f91c3e4a496dbd0d2ef34dee7734.jpg',
        title: '一只杯子',
        status: 1
      }],
    }
  },
  mounted() {
  },
  methods: {
    goodsToggle() {
      this.goodsDialog = !this.goodsDialog
    }
  }
}
</script>

<style scoped>
.auxiliary-right-btn-item {
  width: 36px;
}
.btn-item {
  display: block;
  width: 36px;
  height: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
.bg-1 {
  background-color: #f40;
}
.bg-2 {
  background-color: #2700ff;
}
</style>